<template>
  <el-card shadow="never" :body-style="{ padding: '0px' }" v-loading="loading">
    <div v-if="fileType === 'doc' || fileType === 'xls'">
      <iframe
        :src="googleDocsViewerUrl(props.src)"
        width="100%"
        height="600"
        style="border: none"
      ></iframe>
    </div>
    <vue-office-docx
      v-if="fileType === 'docx'"
      :src="props.src"
      class="xn-ht82"
      style="height: 600px"
      @rendered="renderedHandler"
    />
    <vue-office-excel
      v-else-if="fileType === 'xlsx'"
      :src="props.src"
      class="xn-ht82"
      style="height: 600px"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <vue-office-pdf
      v-else-if="fileType === 'pdf'"
      :src="props.src"
      style="height: 600px"
      @rendered="renderedHandler"
      @error="errorHandler"
    />
    <img
      v-else-if="
        fileType === 'png' ||
        fileType === 'jpg' ||
        fileType === 'gif' ||
        fileType === 'bmp' ||
        fileType === 'jpeg' ||
        fileType === 'ico' ||
        fileType === 'svg'
      "
      :src="props.src"
      class="xn-mwh"
    />
    <div id="pptx" v-else-if="fileType === 'ppt' || fileType === 'pptx'"></div>

    <!-- <a-result v-else status="warning" title="不支持预览的文件类型" /> -->
  </el-card>
</template>

<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf";

const loading = ref(false);
const emit = defineEmits({ goBack: null });
const props = defineProps({
  src: {
    type: String,
    default: "",
    required: true,
  },
  // 文件类型
  fileType: {
    type: String,
    default: "defaults",
    required: false,
  },
});

const fileType = ref();
watch(
  () => props.src,
  () => {
    fileType.value = props.fileType.toLowerCase();
  },
  {
    immediate: true,
  }
);
function googleDocsViewerUrl(url) {
  if (!url) {
    return;
  }
  return `https://view.officeapps.live.com/op/embed.aspx?src=${url}`;
}
watch(
  () => props.src,
  () => {
    if (
      fileType.value === "docx" ||
      fileType.value === "xlsx" ||
      fileType.value === "pdf" ||
      fileType.value === "ppt" ||
      fileType.value === "pptx"
    ) {
      loading.value = true;
      if (fileType.value === "pptx") {
        console.log("🚀 ~ $):", $("#pptx"), props.src);
        $("#pptx").pptxToHtml({
          pptxFileUrl: props.src, //pptx文件地址
          slidesScale: "100%",
          slideMode: false,
          keyBoardShortCut: false,
        });
      }
    }
  },
  {
    immediate: true,
  }
);
// 渲染完成
const renderedHandler = () => {
  loading.value = false;
};
// 渲染失败
const errorHandler = () => {
  message.warning("渲染失败，请尝试重新打开！");
};
</script>

<style lang="less" scoped>
.xn-mwh {
  max-width: 100%;
}
.xn-ht82 {
  height: 82vh;
}
.go-back-button {
  position: absolute;
  float: right;
  right: 10px;
  z-index: 999;
}
</style>
